<template>
  <el-dialog title="" :visible.sync="dialogVisible" width="80%">
    <div class="big_box">
      <div class="box_title">矩阵详情</div>
      <div class="box" ref="main" id="main"></div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  mounted() {
    // this.drawChart();
  },
  methods: {
    drawChart(data) {
      let myChart = this.$echarts.init(this.$refs.main);

      var datas = data;

      var dataList = data;
      var getSymbolData = (data) => {
        const arr = [];
        for (var i = 0; i < data.length; i++) {
          arr.push({
            value: data[i].value,
            symbolPosition: "end",
          });
        }
        return arr;
      };
      var option = (option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        grid: {
          top: "3%",
          bottom: 10,
          right: 25,
          left: 90,
          containLabel: true,
        },
        // dataZoom: [ // 滑动条
        //   {
        //     yAxisIndex: [0, 1],
        //     type: 'inside',
        //     endValue: 4,
        //     start: 0,
        //     end: 50
        //     // zoomLock: true // 只能平移不能缩放
        //   }
        // ],
        backgroundColor: "",
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: dataList,
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "15",
                fontFamily: "PingFang",
                padding: [0, 0, 0, 20],
              },
              // formatter: function(value) {
              //   return value + '笔'
              // }
            },
            data: dataList,
          },
        ],
        series: [
        //   {
        //     name: "XXX",
        //     type: "pictorialBar",
        //     symbolSize: [15, 15],

        //     symbolOffset: [12, 0],
        //     z: 12,
        //     itemStyle: {
        //       normal: {
        //         color: "#E59B1A",
        //         borderColor: "#fff",
        //         borderWidth: 1,
        //       },
        //     },
        //     data: getSymbolData(dataList),
        //   },
          {
            name: "",
            type: "bar",
            yAxisIndex: 0,
            data: dataList,
            barWidth: 10,
            itemStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#06435E",
                    },
                    {
                      offset: 0.6,
                      color: "#067993",
                    },
                    {
                      offset: 1,
                      color: "#00F6F8",
                    },
                  ],
                  false
                ),
              },
              barBorderRadius: 4,
            },
            label: {
              normal: {
                position: [-40, -6],
                borderColor: "rgba(0,212,255,0.5)",
                borderWidth: 1,
                borderRadius: 3,
                align: "center",
                width: 62,
                height: 18,
                lineHeight: 19,
                rich: {},
                color: "rgba(225,225,225,.9)",
                show: true,
                textStyle: {
                  fontSize: 15,
                },
                formatter: function (a, b) {
                  var value = a.name;
                  var v = value.substring(0, 5) + "...";
                  return value.length > 5 ? v : value;
                },
              },
            },
          },
        ],
      });
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    details(data) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.drawChart(data);
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog__header {
  display: none;
}
::v-deep .el-dialog {
  background-color: rgba(255, 0, 0, 0);
}
.big_box {
  background-color: rgba(255, 0, 0, 0);
}
.box {
  width: 100%;
  height: 1500px;
  box-shadow: 1px 1px 20px 3px rgba(0, 100, 199, 0.6) inset,
    -1px -1px 20px 3px rgba(0, 100, 199, 0.6) inset;
  background: #0c276a;
  opacity: 0.96;
  padding: 30px;
  padding-top: 30px;
  margin-top: -20px;
  position: relative;
}
.box_title {
  background-image: url(~img/card_header.png);
  background-size: 100% 100%;
  width: 382px;
  height: 45px;
  background-repeat: no-repeat;
  margin: auto;
  text-align: center;
  line-height: 45px;
  color: white;
  font-size: 22px;
  font-family: YouSheBiaoTiHei;
  position: relative;
  z-index: 1000;
}
.box_title {
}
</style>
